<template>
  <div id="index">
    这是index组件
    <!-- 这是二级路由组件占位符 -->
    <router-view></router-view>
       <div id="tabbar">
     <!-- $router :路由管理对象，负责管理路由（跳路由）
     $route: 路由对象，包含当前路由的所有信息（当前路由地址，携带参数） -->
    
    <!-- 跳路由的2种方式：
    1、<router-link to=""></router-link>
    2、借助路由管理对象this.router通过js代码跳路由 -->
    <!-- this.$router.push("路由地址")
    this.$router.go(-1) 返回上一个
    this.$router.reaplace('./abc') -->

  
    


           <router-link to="/index/home">首页</router-link>
            <router-link to="/index/bbt">爆爆团</router-link>
           <router-link to="/index/order">订单</router-link>
           <router-link to="/index/mine">我的</router-link>
<!-- 
    跳路由传参三种方式：
    1、动态路由，刷新页面数据不会丢失 -->
    <router-link :to="'/detail'+888">详情页</router-link>
    <!-- 2、path+query传参 -->
      <!-- <router-link :to="{path:'/detail',query:{age:999}}">详情</router-link>
    < 3、name+params路由参数 -->
    <!-- <router-link :to="{name:'detail',params:{name:7777}}">详情</router-link>
 --> 

         <!-- <div @click="$router.push('/login')">去登录</div> -->
         <!-- <div @click="$router.replace('/abc')">替换</div> -->
        

       </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
#tabbar{
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid #ccc;
}
</style>